<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="/accueil_template.xhtml">
        <ui:define name="title">
            <p:dock position="top">  
                <p:menuitem value="Home" icon="/resources/dock/home.png" url="#"/>  
                <p:menuitem value="Register" icon="/resources/dock/register.png" url="#"/>  
                <p:menuitem value="Portfolio" icon="/resources/dock/portfolio.png" url="#"/>  
            </p:dock> 
        </ui:define>
        <ui:define name="slide">
            <p:galleria value="#{galleriaBean.images}"  
                        var="image" effect="slide" effectSpeed="1000"  
                        panelWidth="500" panelHeight="250" frameWidth="160" frameHeight="70"  
                        filmstripPosition="top" showCaptions="true" showOverlays="true">  

                <p:graphicImage value="/resources/images/#{image}" title="#{image}"/>  
                <p:galleriaOverlay title="#{image}">  
                    Description for #{image} goes here  
                </p:galleriaOverlay>  
            </p:galleria> 
        </ui:define>
        <ui:define name="body">
            <h:form>           
                <h:panelGrid columns="3">
                    <p:panel header="zoom">
                        <p:imageSwitch effect="zoom">  
                            <ui:repeat value="#{imageSwitchBean.images}" var="image">  
                                <p:graphicImage value="/resources/images/#{image}" />  
                            </ui:repeat>  
                        </p:imageSwitch>
                    </p:panel>
                    <p:panel header="fade">
                        <p:imageSwitch effect="fade">  
                            <ui:repeat value="#{imageSwitchBean.images}" var="image">  
                                <p:graphicImage  value="/resources/images/#{image}"  />  
                            </ui:repeat>  
                        </p:imageSwitch>
                    </p:panel>
                    <p:panel header="zoom">
                        <p:imageSwitch effect="zoom">  
                            <ui:repeat value="#{imageSwitchBean.images}" var="image">  
                                <p:graphicImage value="/resources/images/#{image}" />  
                            </ui:repeat>  
                        </p:imageSwitch>
                    </p:panel>
                </h:panelGrid>
            </h:form>
        </ui:define>
    </ui:composition>
</html>
